<template>
    <div class="ksTitle">
        <div class="layerSelect">
            <div class="titleImg" @click="imgActive">
                <img :src="imgState ? layerImgA : layerImg" alt="" />
            </div>
            <div class="titleItem" v-show="imgState">
                <div
                    @click="changeIndex(index)"
                    v-for="(item, index) in layerList"
                    :class="{ itemActive: item.isActive }"
                    :key="index"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    inject,
    reactive,
} from "vue";
import { useRouter } from "vue-router";
export default {
    setup() {
        const { ctx } = getCurrentInstance();
        let layerList = reactive([
            { name: "地下矿山", isActive: false },
            { name: "尾矿库", isActive: false },
            { name: "露天矿山", isActive: false },
        ]);
        layerList.map((item) => {
            reactive(item);
        });
        const layerImg = ref("/data/images/jcyj/layer.png");
        const layerImgA = ref("/data/images/jcyj/layera.png");
        let imgState = ref(false);
        let currIndex = ref(0);
        function imgActive() {
            imgState.value = !imgState.value;
        }
        function changeIndex(index) {
            layerList.forEach((item, index1) => {
                if (index1 == index) {
                    layerList[index].isActive = !layerList[index].isActive;
                } else {
                    layerList[index1].isActive = false;
                }
            });
        }
        onMounted(() => {});
        return {
            layerList,
            layerImgA,
            layerImg,
            imgState,
            imgActive,
            changeIndex,
        };
    },
};
</script>

<style lang="stylus" scoped>
.ksTitle {
    position: absolute;
    left: vw(462);
    top: vh(268);
    width: vw(162);
    cursor: pointer;
    z-index: 3;

    .layerSelect {
        .titleImg {
            width: vw(50);
            height: vh(50);
        }

        .titleItem {
            div {
                width: vw(115);
                height: vh(41);
                line-height: vh(41);
                text-align: center;
                border: 1px solid #115178;
            }

            .itemActive {
                background: #0A2B3C;
            }
        }
    }
}
</style>